<style rel="stylesheet/scss" lang="scss" scoped>
    .info-containter {
        display: flex;
        flex: 1;
		max-height: 100%;
		padding: 20px;
		overflow: auto;
		box-sizing: border-box;
        flex-direction: column;
		.box-flex{
			display: flex;
			font-size: 14px;
			margin-bottom: 20px;
			
		}
		.w-span{
			min-width: 100px;
			line-height: 40px;
			display: inline-block;
		}
		.img-box{
			width: 100px;
			height: 100px;
			border: 1px solid #e5e5e5;
		}
    }
</style>
<template>
	<div class="info-containter" v-if="merchantInfo">
		<el-row>
			<el-col :span="10" class="box-flex">
				<span class="w-span">商户号</span>
				<el-input placeholder="请输入商户号" maxLength="6" v-model="merchantInfo.merchantCode" disabled="disabled" ></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="10" class="box-flex">
				<span class="w-span">账号</span>
				<el-input placeholder="请输入账号" maxLength="11" v-model="merchantInfo.loginName" disabled="disabled"></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="10" class="box-flex">
				<span class="w-span">店铺logo</span>
				<div class="img-box" @click="clickPicture('logo')" >
					<img :src="merchantInfo.merchantIcon" style="width:100px;display: inline-block;height:100px; border-radius: 5px;z-index:999;border: 1px solid #E5E5E5;" alt=""/>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="10" class="box-flex">
				<span class="w-span">店铺名</span>
				<el-input placeholder="请输入店铺" maxLength="20" v-model="merchantInfo.merchantName"></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="10" class="box-flex">
				<span class="w-span">联系人</span>
				<el-input placeholder="请输入联系人" maxLength="20" v-model="merchantInfo.contactName"></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="10" class="box-flex">
				<span class="w-span">联系手机</span>
				<el-input placeholder="请输入联系手机" maxLength="11"  v-model="merchantInfo.contactMobile"></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="10" class="box-flex">
				<span class="w-span">客户电话</span>
				<el-input placeholder="请输入客服电话" maxLength="15" v-model="merchantInfo.companyPhone"></el-input>
			</el-col>
		</el-row>
		<!-- <el-row>
			<el-col :span="10" class="box-flex">
				<span class="w-span">主题颜色</span>
				<el-color-picker v-model="merchantInfo.themeColors"></el-color-picker>
			</el-col>
		</el-row> -->
		<el-row class="m-b-10">
			<el-button type="primary" @click="saveInfoFn">保存</el-button>
		</el-row>
		<input type="file" ref="logo" style="display:none;" @change="isSizeClear();" />
	</div>
</template>
<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	export default {
		data() {
			return {
				merchantInfo: null,
				uploadType: '',
				uploadTypeChange: '',
			}
		},
		created:function(){
			this._initData()
		},
		methods: {
			_initData() {
				this.$ajax({
					api: 'merchant/info',
					params: {
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : ''
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.merchantInfo = res.data
					}
				}).catch(err => {
					this.$message({
						type:'error',
						message: err.message
					})
				})
			},
			// 保存联系人信息
			saveInfoFn() {
				let info = this.merchantInfo
				let attr = !info.merchantIcon ? '请上传店铺logo' : !info.merchantName ? '请填写店铺名' : !info.contactName ? '请填写联系人' : !info.contactMobile ? '请填写联系人手机号':info.contactMobile.length != 11? '请填写11位电话号码' :''
				if(attr) {
					this.$message({
						type:'error',
						message: attr
					})
					return
				}
				this.$ajax({
					api: 'merchant/info/update',
					params: {
						token: getToken(),
						merchantName: info.merchantName,
						contactName: info.contactName,
						contactMobile: info.contactMobile,
						companyPhone: info.companyPhone,
						merchantIcon: info.merchantIcon,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : ''
					}
				}).then(res => {
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							type:'success',
							message: '保存成功'
						})
					}
				}).catch(err => {
					this.$message({
						type:'error',
						message: err.message
					})
				})
			},
			clickPicture(uploadType) {
				console.log(this.uploadTypeChange);
				if(this.uploadTypeChange !== "") {
					return;
				}
				this.uploadType = uploadType;
				this.$refs.logo.click();
			}, 
			isSizeClear() {
				if(!this.$refs.logo.files[0]) {
					return;
				}
				this.uploadTypeChange = this.uploadType;
				let form = new FormData();
				let logo = this.$refs.logo.files[0];
				let maxSize = 1024*1024*5
				console.log(logo)
				if(logo.size > maxSize) {
					this.$message({
						type: 'error',
						message: '请上传小于5M图片'
					})
					this.uploadTypeChange = "";
					this.$refs.logo.value = ''
					return
				}
				form.append("file", logo);
				this.$ajax({
					api: 'fileupload',
					params: {
						file: form
					}
				}).then(res =>　{
					this.uploadTypeChange = "";
					this.$refs.logo.value = ''
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.merchantInfo.merchantIcon = res.data.filename
					}
				}).catch(err => {
					this.$refs.logo.value = ''
					this.uploadTypeChange = "";
					this.$message({
						type:'error',
						message:err.message
					})
				})
			}
		}
	}
</script>